<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac" style="width: 290px;">
        <p class="label font14 text_black">{{ $t("管理员名称") }}：</p>
        <el-input v-model="manager" :placeholder="$t('请输入管理员名称')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("手机号码") }}：</p>
        <el-input v-model="phone" :placeholder="$t('请输入手机号码')"></el-input>
      </div>

      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(1)">
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent(1)">{{ $t("清除") }}</button>
      </div>

      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属业务员") }}：</p>
        <el-select v-model="orderStatusVal" :placeholder="$t('请选择业务员')" @change="orderStatusChange">
          <el-option
            v-for="item in orderStatusArr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black agency_name">{{ $t("管理员状态") }}：</p>
        <el-select v-model="clientVal" :placeholder="$t('管理员状态')" @change="clientChange">
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <button class="sub_btn font14 text_white bg_blue sub_btnn" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addAgent"
        v-if="permissions.indexOf('/agency/sellerAdd') != -1"
      >{{ $t("新增商户管理员") }}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('管理员名称')"></el-table-column>
        <el-table-column prop="phone" :label="$t('手机号码')"></el-table-column>
        <el-table-column prop="brokerage" :label="$t('佣金比例')">
          <template slot-scope="{ row }">
            <span>{{ row.brokerage }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('用户状态')"></el-table-column>
        <el-table-column prop="open_lock" :label="$t('是否可开锁')">
          <template slot-scope="{ row }">
            <span v-if="row.open_lock == 0">{{ $t("否") }}</span>
            <span v-if="row.open_lock == 1">{{ $t("是") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_withdraw" :label="$t('是否允许提现')">
              <template slot-scope="{ row }">
                <span v-if="row.is_withdraw == 0">{{ $t("否") }}</span>
                <span v-if="row.is_withdraw == 1">{{ $t("是") }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="m_withdraw" :label="$t('是否允许秒提')">
              <template slot-scope="{ row }">
                <span v-if="row.m_withdraw == 0">{{ $t("否") }}</span>
                <span v-if="row.m_withdraw == 1">{{ $t("是") }}</span>
              </template>
            </el-table-column>
        <el-table-column prop="agency_name" :label="$t('归属代理')"></el-table-column>
        <el-table-column prop="employee_name" :label="$t('归属业务员')"></el-table-column>
        <el-table-column :label="$t('操作')" width="300" fixed="right">
          <template slot-scope="scope">
            <div class="options_box">
              <el-button
                v-if="permissions.indexOf('/agency/sellerEdit') != -1"
                size="mini"
                type="primary"
                @click="updateAgent(scope.row)"
              >{{ $t("修改") }}</el-button>
              <el-button size="mini" type="success" @click="statistics(scope.row)">{{ $t("统计") }}</el-button>
              <el-button
                v-if="permissions.indexOf('/agency/sellerDelete') != -1"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >{{ $t("删除") }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 修改 -->
    <el-dialog
      :title="isUpdate ? $t('修改商户管理员') : $t('添加商户管理员')"
      width="900px"
      :visible.sync="showAddDialog"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('管理员名称')}}：</span>
          <el-input v-model="addFrom.manager" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('管理员手机')}}：</span>
          <el-input v-model="addFrom.phone" :placeholder="$t('请输入')"></el-input>
          <span class="tip font14 text_danger">{{$t('用于登录APP或小程序代理端')}}</span>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('登陆密码')}}：</span>
          <el-input v-model="addFrom.password" show-password :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="lable font14 text_black">{{$t('所属代理')}}：</p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(2)">
            <p class="text-ellipsis">{{ addFrom.top_agent ? addFrom.top_agent : $t('选择代理') }}</p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent(2)">{{$t('清除')}}</button>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="lable font14 text_black">{{$t('所属业务员')}}：</p>
          <el-select v-model="salesmanVal" :placeholder="$t('请选择业务员')" @change="salesmanChange">
            <el-option
              v-for="item in salesmanArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <span class="tip font14 text_danger">{{$t('分成比')}}0%</span> -->
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('佣金百分比')}}：</span>
          <el-input v-model="addFrom.brokerage" :placeholder="$t('请输入')"></el-input>
          <span
            class="tip font14 text_danger"
          >{{$t('必须小于所属代理商分成比')}}（100）{{$t('的整数')}},{{$t('单位')}}%</span>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('可打开机柜')}}：</span>
          <el-radio v-model="addFrom.open_lock" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.open_lock" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('是否允许提现')}}：</span>
          <el-radio v-model="addFrom.is_withdraw" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.is_withdraw" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('是否允许秒提')}}：</span>
          <el-radio v-model="addFrom.m_withdraw" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.m_withdraw" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('状态')}}：</span>
          <el-radio v-model="addFrom.status" :label="1">{{$t('正常')}}</el-radio>
          <el-radio v-model="addFrom.status" :label="2">{{$t('禁用')}}</el-radio>
        </div>

        <el-button type="primary" v-if="!isUpdate" @click="addSubmit">{{$t('提交')}}</el-button>
        <el-button type="primary" v-if="isUpdate" @click="updateSubmit">{{$t('提交')}}</el-button>
      </div>
    </el-dialog>

    <agent-list ref="agentList" :memusid="memusid" :uid="uid" :type="agentType" @hide="closeAgentList"></agent-list>
    <agent-stat ref="agentStat"></agent-stat>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import agentStat from "components/stat/agent-stat.vue";
import { mapState } from "vuex";
import util from "@/assets/js/util.js";
export default {
  name: "agency-sellerList",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      manager: "",
      phone: "",
      agent: "",
      agent_id: "",
      isUpdate: false,
      showAddDialog: false,
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("管理员状态")
        },
        {
          value: 1,
          label: that.$t("正常")
        },
        {
          value: 2,
          label: that.$t("禁用")
        }
      ],
      orderStatusVal: 0,
      orderStatusArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      tableData: [],
      agentType: 1,
      salesmanVal: 0,
      salesmanArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      addFrom: {
        id: "",
        manager: "",
        phone: "",
        password: "",
        open_lock: 1,
        is_withdraw: 1,
        m_withdraw:1,
        status: 1,
        top_agent: "",
        parent_id: "",
        brokerage: "",
      }
    };
  },
  components: {
    agentList,
    agentStat
  },
  computed: {
    // ...mapState(["permissions"])
    ...mapState(["permissions", 'equipmentModel', "memusid", "uid", "name"])

  },
  mounted() {
    
    if(this.memusid == 5){
      this.daili = false;
      
      this.agent_id = this.uid;

      this.agent = this.name;
      this.addFrom.parent_id = this.uid;
      this.addFrom.top_agent = this.name;
      // this.bindAgentFrom.agent_id = this.uid;
      // this.bindAgentFrom.agent_name = "请选择代理商";
      // this.addCabFrom.agent_id = this.uid;
      // this.aid = this.uid;
      // console.log("打印一下this.aid")
      // console.log(this.aid);
      // this.agent = this.name;
    }
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.manager = ''
      this.phone = ''
      this.clientVal = 0
      this.agent_id = ''
      this.orderStatusVal = 0
      this.agent = ''
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util
        .$http("/agency/sellerList?page=" + this.page, {
          page_size: this.page_size,
          name: this.manager,
          phone: this.phone,
          agency_id: this.agent_id,
          agency_name: this.agent,
          employee_id: this.orderStatusVal,
          status: this.clientVal
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    getEmployee(id, callback) {
      util
        .$http("/seller/employeeList", {
          id
        })
        .then(res => {
          if (res.code == 1) {
            callback(res.data);
          }
        });
    },
    addAgent() {
      this.addFrom = {
        id: "",
        manager: "",
        phone: "",
        password: "",
        open_lock: 1,
        is_withdraw: 1,
        m_withdraw:1,
        status: 1,
        top_agent: "",
        parent_id: "",
        brokerage: ""
      };
      if(this.memusid == 5){
        this.addFrom.top_agent = this.name;
        this.addFrom.parent_id = this.uid;
      }
      this.salesmanArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.salesmanVal = 0;
      this.isUpdate = false;
      this.showAddDialog = true;
    },
    orderStatusChange(val) {
      this.orderStatusVal = val;
    },
    openAgentList(type) {
      this.agentType = type;
      this.$refs.agentList.show();
    },
    closeAgentList(data, type) {
      let employArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      if (type == 1) {
        this.agent_id = data.id;
        this.agent = data.name;
        this.getEmployee(data.id, res => {
          this.orderStatusArr = [...employArr, ...res];
          this.orderStatusVal = 0;
        });
      } else if (type == 2) {
        this.addFrom.parent_id = data.id;
        this.addFrom.top_agent = data.name;
        this.getEmployee(data.id, res => {
          this.salesmanArr = [...employArr, ...res];
          this.salesmanVal = 0;
        });
      }
    },
    clearAgent(type) {
      if (type == 1) {
        this.agent_id = "";
        this.agent = "";
        this.orderStatusArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.orderStatusVal = 0;
      } else if (type == 2) {
        this.addFrom.parent_id = this.uid;
        this.addFrom.top_agent = this.name;
        this.salesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.salesmanVal = 0;
      }
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    updateAgent(row) {
      let employArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.isUpdate = true;
      this.showAddDialog = true;
      setTimeout(() => {
        util
        .$http("/agency/sellerDetail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.addFrom = {
              id: res.data.id,
              manager: res.data.name,
              phone: res.data.phone,
              password: "",
              open_lock: Number(res.data.open_lock),
              is_withdraw: Number(res.data.is_withdraw),
              m_withdraw: Number(res.data.m_withdraw),
              status: Number(res.data.status),
              parent_id: res.data.parent_id,
              top_agent: res.data.agency_name,
              brokerage: res.data.brokerage
            };
            this.salesmanVal = res.data.employee_id;
            this.getEmployee(res.data.parent_id, result => {
              this.salesmanArr = [...employArr, ...result];
            });
          }
        });
      }, 150);
    },
    statistics(row) {
      this.$refs.agentStat.show(row.id)
    },
    handleDelete(row) {
      this.$confirm(this.$t("是否要删除当前商户管理员"))
        .then(() => {
          util
            .$http("/agency/sellerDelete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    salesmanChange(val) {
      this.salesmanVal = val;
    },
    addSubmit() {
      util
        .$http("/agency/sellerAdd", {
          name: this.addFrom.manager,
          phone: this.addFrom.phone,
          password: this.addFrom.password,
          parent_id: this.addFrom.parent_id,
          employee_id: this.salesmanVal,
          brokerage: this.addFrom.brokerage,
          open_lock: this.addFrom.open_lock,
          is_withdraw: this.addFrom.is_withdraw,
          m_withdraw: this.addFrom.m_withdraw,
          status: this.addFrom.status
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.isUpdate = false;
            this.showAddDialog = false;
            this.addFrom = {
              id: "",
              manager: "",
              phone: "",
              password: "",
              open_lock: 1,
              is_withdraw: 1,
              m_withdraw: 1,
              status: 1,
              top_agent: "",
              parent_id: "",
              brokerage: ""
            };
            this.salesmanArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.salesmanVal = 0;
            this.getData();
          }
        });
    },
    updateSubmit() {
      util
        .$http("/agency/sellerEdit", {
          id: this.addFrom.id,
          name: this.addFrom.manager,
          phone: this.addFrom.phone,
          password: this.addFrom.password,
          parent_id: this.addFrom.parent_id,
          employee_id: this.salesmanVal,
          brokerage: this.addFrom.brokerage,
          open_lock: this.addFrom.open_lock,
          is_withdraw: this.addFrom.is_withdraw,
          m_withdraw: this.addFrom.m_withdraw,
          status: this.addFrom.status
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.isUpdate = false;
            this.showAddDialog = false;
            this.addFrom = {
              id: "",
              manager: "",
              phone: "",
              password: "",
              open_lock: 1,
              is_withdraw: 1,
              m_withdraw: 1,
              status: 1,
              top_agent: "",
              parent_id: "",
              brokerage: ""
            };
            this.salesmanArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.salesmanVal = 0;
            this.getData();
          }
        });
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 290px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding-left: 50px;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 170px;
}
.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.order_detail .ipt_list .tip {
  width: 350px;
  margin: 0 0 0 15px;
}
.order_detail .select_box {
  margin-bottom: 20px;
}
.order_detail .select_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .select_box .el-select {
  width: 170px;
}
.order_detail .select_box .tip {
  width: 350px;
  margin: 0 0 0 15px;
}
.order_detail .radio_list {
  margin-bottom: 20px;
}
.order_detail .radio_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box {
  margin-bottom: 20px;
}
.order_detail .div_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.order_detail .div_box .content:active {
  border-color: #409eff;
}
.order_detail .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.order_detail .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 25px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  margin-left: 100px;
  margin-top: 20px;
}
</style>
